<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/7/17
  Time: 9:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="resroot" value="${ctx}/common"/>
<c:set var="jsroot" value="${resroot}/js"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${ctx}/common/css/bootstrap.min.css">
    <title>登录</title>
    <style type="text/css">
        a:hover {
            text-decoration: none;
        }

        .panel-body {
            background: url("${ctx}/common/images/login/bg_login.jpg") no-repeat center;
            height: 520px;
        }

        .panel-body .form {

            float: right;
            margin-right: 160px;
            position: relative;
            z-index: 2;
            top: 60px;
            width: 380px;
            height: 320px;
            background: #ffffff;
            opacity: .9;
        }

        button.btn {
            display: block;
            width: 80%;
            height: 50px;
            line-height: 40px;
            background: #ff4001;
            color: #ffffff;
            font-size: 16px;
            margin: auto;

        }

        #userName {
            padding-left: 30px;
            background: url("${ctx}/common/images/login/phone.png") no-repeat 2px;
            width: 290px;
            height: 40px;
            margin: auto;
            border: 0;
        }

        #password {
            padding-left: 30px;
            background: url("${ctx}/common/images/login/pwd.png") no-repeat 2px;
            width: 290px;
            height: 40px;
            margin: auto;
            border: 0;

        }
    </style>
</head>
<body>
<div style="position: fixed;z-index: 1;top: 0;;left: 0px;right: 0px;">
    <div class="container-fluid" style=" padding: 29px 75px;z-index: 2;background: #FFFFFF;opacity:0.9;">
        <div class="row">
            <div class="col-xs-3">
                <img src="${ctx}/common/images/home/logo.png" style="padding-top: 12px;"/>
            </div>
        </div>
    </div>
</div>
<div >
    <div class="container-fluid" style="z-index: 1;margin-top: 90px;padding: 0">
        <div class="row">
            <div class="col-xs-12" style="height: 522px">
                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="form">
                            <div class="container-fluid" style="margin-top: 20px">
                                <div class="row">
                                    <div class="col-xs-5 text-center" style="padding: 0px;padding-left: 45px">
                                        <a href="javascript:void(0);">
                                            <h4>账户密码登录</h4>
                                        </a>
                                    </div>
                                    <div class="col-xs-2 text-center" style="padding: 0px">
                                        <h4>|</h4>
                                    </div>
                                    <div class="col-xs-5 text-center" style="padding: 0px;padding-right: 45px">
                                        <a href="javascript:void(0);">
                                            <h4>手机验证登录</h4>
                                        </a>

                                    </div>
                                </div>
                                <div class="row">

                                    <div class="form-group" style="margin-top: 20px">
                                        <div class="col-xs-12">
                                            <input type="text" class="form-control" id="userName" placeholder="请输入账号">
                                        </div>
                                    </div>
                                    <div class="form-group" style="margin-top: 95px">
                                        <div class="col-xs-12">
                                            <input type="password" class="form-control" id="password" placeholder="请输入密码">
                                        </div>
                                    </div>
                                    <div class="col-xs-12 text-center" style="padding-top: 40px">
                                        <a href="#">
                                            <button class="btn" onclick="singIn()"><p class="text-center">立即登录</p></button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div style="background:#ebebeb">
    <div class="row" style="background: #ebebeb;padding-top: 50px;">
        <div class="col-xs-5"></div>
        <div class="col-xs-1 text-center">
            <a href="javascript:void(0);">
                <span class="glyphicon glyphicon-user" style="font-size: 30px;"></span>
                <small style="display: block;">客服</small>
            </a>
        </div>
        <div class="col-xs-1 text-center">
            <a href="javascript:void(0);">
                <span class="glyphicon glyphicon-cloud" style="font-size: 30px;"></span>
                <small style="display: block;">微信</small>
            </a>
        </div>
        <div class="col-xs-5"></div>
    </div>
    <div class="row text-center" style="background: #ebebeb;padding-top: 20px;">
        <small>客服电话：18578752336&nbsp;&nbsp;服务时间：（08:30-20:30）</small>
    </div>

    <div class="row" style="background: #ebebeb;">
        <div class="col-xs-2"></div>
        <div class="col-xs-8" style="background: #ebebeb;">
            <ol class="breadcrumb text-center" style="background: #ebebeb;">
                <li><a href="#">诺心公告</a></li>
                <li><a href="#">关于诺心</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">客服服务</a></li>
                <li><a href="#">食品经营许可证</a></li>
                <li><a href="#">生产许可证</a></li>
                <li><a href="#">工商管理</a></li>
            </ol>
        </div>
        <div class="col-xs-2"></div>
    </div>
    <div class="row text-center" style="background: #ebebeb;padding-top: 20px;">
        <small>诺心食品（上海）有限公司 上海徐汇区田林路140号28号楼 客服邮箱：services@lecake.com 公司电话：4001-578-578</small>
    </div>
    <div class="row text-center"
         style="background: #ebebeb;padding-top: 20px;padding-bottom: 30px;">
        <small>copyright©2010-2017诺心lecake.com版权所有 沪ICP备10211730</small>
    </div>
</div>

<script src="${ctx}/common/js/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/common/js/jquery.cookie.js"></script>
<script>
    function singIn() {
        var userName = $('#userName').val().trim();
        var password = $('#password').val().trim();
        if(!userName || !password){
            alert("用户名或密码不能为空");
            return;
        }
        $.post('${ctx}/signin.action',{
            'userName' : userName,
            'password' : password
        },function(result){
            if(result.success) {
                var cart = $.cookie('cart');
                if(!!cart){//cookie里面有购物车数据
                    $.cookie('cart','',{path: '/' });
                }
                location.href = '${ctx}/home.action';
            }else{
                alert(result.error);
            }
        },'json');

        <%--$.ajax({--%>
            <%--url : '${ctx}/signin.html',--%>
            <%--type: 'post',--%>
            <%--timeout: 5000,--%>
            <%--data : {--%>
                <%--'userName' : userName,--%>
                <%--'password' : password--%>
            <%--},--%>
            <%--dataType : 'json',--%>
            <%--success: function(data) {--%>
                <%--if(!data.result.success) {--%>
                    <%--alert(data.result.error);--%>
                <%--}else{--%>
                    <%--location.href = '${ctx}/user.html';--%>
                <%--}--%>
            <%--},--%>
            <%--error: function (data) {--%>
                <%--console.log(data);--%>
                <%--alert(data);--%>
            <%--}--%>
        <%--})--%>
    }
</script>
</body>
</html>
